.frame {
  position: absolute;
  width: 400px;
  height: 400px;
  inset: 0;
  margin: auto;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.top {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  background-color: #444;
}

.bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  bottom: 0;
  background-color: #37D493;
}

.ellipse {
  position: absolute;
  z-index: 2;
  width: 420px;
  height: 400px;
  top: 0;
  left: -10px;
  transform-style: preserve-3d;
  animation: elastic 5s ease-in-out infinite;
}
.ellipse .grey, .ellipse .green {
  position: absolute;
  width: 420px;
  height: 400px;
  background-color: #444;
  backface-visibility: hidden;
  border-radius: 50%;
  z-index: 2;
  transform: rotateX(0);
}
.ellipse .green {
  background-color: #37D493;
  transform: rotateX(180deg);
}

@keyframes elastic {
  0% {
    transform: rotateX(90deg);
  }
  15% {
    transform: rotateX(150deg);
  }
  20% {
    transform: rotateX(50deg);
  }
  25% {
    transform: rotateX(120deg);
  }
  30% {
    transform: rotateX(70deg);
  }
  35% {
    transform: rotateX(100deg);
  }
  40% {
    transform: rotateX(83deg);
  }
  45% {
    transform: rotateX(93deg);
  }
  50% {
    transform: rotateX(90deg);
  }
  65% {
    transform: rotateX(30deg);
  }
  70% {
    transform: rotateX(130deg);
  }
  75% {
    transform: rotateX(60deg);
  }
  80% {
    transform: rotateX(110deg);
  }
  85% {
    transform: rotateX(80deg);
  }
  90% {
    transform: rotateX(97deg);
  }
  95% {
    transform: rotateX(87deg);
  }
  100% {
    transform: rotateX(90deg);
  }
}